<template>
  <div class="user-list">
    <div class="user-item" v-for="(item, index) in searchList" :key="'u'+index" @tap='toView(item.user_id)' v-if='item.user_id != 0'>
      <div class="flex">
        <div class="pic-box">
          <img :src="item.portrait" alt="头像">
          <img class="u-level-pic u-level-1" src="../../assets/images/ico/ic_level1.png" alt="翡翠会员" v-if="item.user_rank == 1">
          <img class="u-level-pic u-level-2" src="../../assets/images/ico/ic_level2.png" alt="水晶会员" v-if="item.user_rank == 2">
          <img class="u-level-pic u-level-3" src="../../assets/images/ico/ic_level3.png" alt="钻石会员" v-if="item.user_rank == 3">
          <img class="u-level-pic u-level-4" src="../../assets/images/ico/ic_level4.png" alt="高级会员" v-if="item.user_rank == 4">
        </div>
        <div class="info">
          <div class="u-info-main">
            <span class="u-name" v-text="item.nickname">用户**</span>
            <span class="u-identify" v-if="item.is_shiming == 1">实名</span>
            <span class="u-level" v-if="item.user_rank == 1">高级会员</span>
            <span class="u-level" v-if="item.user_rank == 2">水晶会员</span>
            <span class="u-level" v-if="item.user_rank == 4">翡翠会员</span>
            <span class="u-level" v-if="item.user_rank == 3">钻石会员</span>
            <div class="u-pic-num mui-pull-right">
              <span class="mui-icon mui-icon-image"></span>
              <span class="pic-num">{{item.images ? item.images.length : 0}}</span>
            </div>
          </div>
          <p class="u-sub-info">{{item.age}}岁|{{item.height}}|{{item.education}}|{{item.income}}</p>
          <div class="u-label-box">
            <span class="u-label" v-if='item.is_caifu==1'>有房</span>
            <span class="u-label" v-if='item.is_car==1'>有车</span>
          </div>
        </div>
      </div>
      <div class="u-operate mui-text-right">
        <a href="javascript:">
          <img src="../../assets/images/ico/ic_e_hi.png" alt="图标">
          <span>打招呼</span>
        </a>
        <a href="javascript:">
          <img src="../../assets/images/ico/ic_e_chat.png" alt="图标">
          <span>和ta聊</span>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
  import {MH_API} from "@/api/api";
  export default {
    name: "user-list",
    data () {
      return {
        searchList: [
          {
            id: '1',
            name: '张狂',
            trueName: 1,
            level: 1,
            pic: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1412847876,2340663577&fm=11&gp=0.jpg',
            age: 23,
            height: 174,
            edu: '本科',
            income: '4000-5000',
            house: 1,
            heightIncome: 1,
            picNum: 5
          }
        ],
        order: '',
        address: '',
        height: '',
        marriage: '',
        income: '',
        car: '',
        house: '',
        registered_residence: '',
        hometown: '',
        children: '',
        zodiac: ''
      }
    },
    methods: {
      getData(order, address, height, marriage, income, car, house, registered_residence, hometown, children, zodiac){
        console.log(1234567890)
        // order （1 最近加入 2 最近登录 3 收入） 
        // address（居住地）  height（身高）
        // marriage（婚姻） income（收入） 
        // car（购车情况）house（买房情况）  
        // registered_residence（户口）   hometown（家乡）   
        // children（子女情况）  zodiac（星座
        let self = this;
        MH_API.getUsers({
          page: 1,
          limit: 30,
          order: order || self.order,
          address: address || self.address,
          height: height || self.height,
          marriage: marriage || self.marriage,
          income: income || self.income,
          car: car || self.car,
          house: house || self.house,
          registered_residence: registered_residence || self.registered_residence,
          hometown: hometown || self.hometown,
          children: children || self.children,
          zodiac: zodiac || self.zodiac
        }).then(res => {
          if (res.status === 200) {
            self.searchList = res.data;
          }
        })
      },
      toView(id){
        let userid = id || '1103';
        this.$router.push({
          path: '/meet/detail',
          query: {
            id: userid
          }
        })
      }
    },
    created(){
      this.getData();
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../assets/css/mixin";
  .user-item {
    padding: 1rem;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  }
  .pic-box {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    margin-right: 1rem;
    img {
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
    img.u-level-pic {
      position: absolute;
      width: 1.85rem;
      height: auto;
      top: -1rem;
      right: .5rem;
      transform: rotate(30deg);
    }
  }
  .info {flex: 1}
  .u-name {font-size: 1.5rem;}
  .u-identify {
    padding: .1rem .35rem;
    background-color: #0ba8ef;
    @include sc(.9rem, #f2f2f2);
    border-radius: .1rem;
  }
  .u-level {
    padding: .1rem .35rem;
    @include sc(.9rem, #f2f2f2);
    background: #ffa004 linear-gradient(90deg, #ffa004 0%, #fa7b75 100%);
    border-radius: .1rem;
  }
  .mui-icon-image,.pic-num {@include sc(.5rem, #999);}
  .u-sub-info {
    margin: .5rem 0;
    @include sc(1.2rem, #999);
  }
  .u-label {
    padding: .2rem .5rem;
    @include sc(1rem, #666);
    background-color: #eeeeee;
    border-radius: .1rem;
  }
  .u-operate {
    a {
      margin-left: 1.5rem;
      @include sc(1rem, #f26c60);
    }
    img {width: 1.15rem;}
  }
</style>
